﻿.wpt-leave {
    opacity: 1;
    transition: opacity 0.5s ease-in;
}
.wpt-leave.wpt-leave-active {
    opacity: 0.01;
}
.wpt-enter {
    opacity: 0.01;
    transition: opacity 0.5s ease-in;
}
.wpt-enter.wpt-enter-active {
    opacity: 1;
}

.flip-left {
    animation: flipLeft 0.2s ease-out;
    opacity: 1 !important;
    visibility: visible !important;
    animation-fill-mode: forwards;
}

@keyframes flipLeft {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(100%);
        opacity: 1;
    }
}
.flip-right {
    backface-visibility: hidden;
    animation: flipRight 0.3s ease-out;
    opacity: 1 !important;
    visibility: visible !important;
    animation-fill-mode: forwards;
    // 当元素用户transfrom不为none的属性时，其fixed的子元素f相对于此元素定位
    // 为了避免执行动画过程中抖动，添加高度限制
    height: 100vh;
}
@keyframes flipRight {
    0% {
        transform: translateX(100%);
        opacity: 1;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.flip-up {
    animation: flipUp 0.2s ease-out;
    opacity: 1 !important;
    visibility: visible !important;
    animation-fill-mode: forwards;
}
@keyframes flipUp {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }
    90% {
        transform: translateY(0);
        opacity: 1;
    }
}

.flip-up-site {
    animation: flipUpSite 0.3s ease-out;
    opacity: 1 !important;
    visibility: visible !important;
    animation-fill-mode: forwards;
}
@keyframes flipUpSite {
    0% {
        transform: translateY(8rem);
        opacity: 0;
    }
    90% {
        transform: translateY(0);
        opacity: 1;
    }
}

.flip-down {
    animation: flipDown 0.3s ease-out;
    opacity: 1 !important;
    visibility: visible !important;
    animation-fill-mode: forwards;
}

@keyframes flipDown {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(100%);
        opacity: 0;
    }
}

#Page.root-page-hide {
    height: 0px !important;
    min-height: 0px !important;
    max-height: 0px !important;
    overflow: hidden;
    // opacity: 0; 会导致顶部fixed渲染一般异常
    // 似乎在某些ios手机上会导致fixed定位出现异常
    // transform: translate(0, 0); // 待验证稳一点吧
    // 添加absolute margin-left: 10000px 导致ios fixed元素在pageShow的时候无法正常渲染
    // 不做处理fixed元素会显示在底部，造成的唯一问题是，如果margin-top/bottom透传时，页面会显示底部的fixed元素
    // display: none的会导致获取dom元素尺寸不符合预期
    // visibility: hidden; 会导致ios css多行省略号展示异常！目前ios13.5没有这种情况

    .device-ios & {
        // visibility: hidden;
        transform: translate(0, 0);
    }

    .device-pc & {
        transform: translate(0, 0);
    }

    .device-android & {
        transform: translate(0, 0);
    }
}
